<template>
	<view class="box">
		<view class="bg_f5 top flex3">
			<van-icon name="search" size="17" class="top_icon" />
			<view class="w_flex1">
				<van-field auto-focus placeholder="输入店员昵称或手机号" placeholder-style="color: #acacac" class="font_31"
					clearable @clear="get_clear" @confirm="get_confirm" />
			</view>
		</view>
		<view class="content hidden" v-if="is_load">
			<view class="font_27 color_999 flex7 add_m1" v-if="data_list.length === 0">未匹配到数据~</view>
			<view v-else>
				<view class="flex3 list van-hairline--bottom" v-for="item in data_list">
					<image :src="item.avatar" mode="aspectFill"></image>
					<view class="font_31 w_flex1" style="overflow: hidden;">
						<view>{{item.nickname}}</view>
						<view class="detail_m1">{{item.mobile?item.mobile: '暂未绑定手机号'}}</view>
					</view>
					<view class="phone_wrapper flex2">
						<view class="btn2" @click="get_btn(item)">绑定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_load: false,
				data_list: [],
			}
		},
		methods: {
			get_confirm(e) {
				let keywords = e.detail;

				if (keywords) {
					this.$http.get(this.$api.searchMember, {
						keywords: keywords
					}).then(res => {
						this.is_load = true;
						this.data_list = res.data;
					})
				}
			},
			get_clear() {
				this.is_load = false;
			},
			// 绑定
			get_btn(e) {
				let self = this;
				uni.showModal({
					title: '提示',
					content: '确认绑定该用户成为店员吗？',
					success: function(res) {
						if (res.confirm) {
							self.get_unbundle(e);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			get_unbundle(e) {
				getApp().get_loading();
				this.$http.get(this.$api.saveStoreClerk, {
					member_id: e.id
				}).then(res => {
					getApp().get_msg('绑定成功');
					getApp().get_back();
				})
			}
		}
	}
</script>

<style lang="less">
	.add_m1 {
		margin: 50rpx 0;
	}
	
	.detail_m1 {
		margin: 12rpx 0 0 0;
	}

	.top {
		height: 62rpx;
		width: 704rpx;
		padding: 0 23rpx;
		border-radius: 12rpx;
		box-sizing: border-box;
		margin: 12rpx auto 44rpx;

		input {
			flex: 1;
		}
	}

	.top_icon {
		margin-right: 20rpx;
	}

	.content {
		padding: 0 23rpx;
	}

	.list {
		padding: 31rpx 0;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 23rpx;
		}

		.phone_wrapper {
			margin-left: 50rpx;

			.btn2 {
				font-size: 28rpx;
				width: 120rpx;
				height: 60rpx;
			}
		}
	}

	.top /deep/ .van-cell {
		padding: 0;
		background-color: transparent;
	}
</style>
